 @charset "UTF-8";
/**
 * 购物节 首页
 * @Author river
 * @email lijiang@ymatou.com
 * @Date 2015/10/12
 */

 @import "../_components/variables.scss";
 @import "../_components/_mixin.scss";
 @import "../_components/reset.scss";

$rem:1rem/32;

@keyframes sign-sway {
    0% {
        -moz-transform: translateX(-18%) rotate(13deg);
        -ms-transform: translateX(-18%) rotate(13deg);
        -webkit-transform: translateX(-18%) rotate(13deg);
        transform: translateX(-18%) rotate(13deg);
    }
    50% {
        -moz-transform: translateX(18%) rotate(-13deg);
        -ms-transform: translateX(18%) rotate(-13deg);
        -webkit-transform: translateX(18%) rotate(-13deg);
        transform: translateX(18%) rotate(-13deg);
    }
    100% {
        -moz-transform: translateX(-18%) rotate(13deg);
        -ms-transform: translateX(-18%) rotate(13deg);
        -webkit-transform: translateX(-18%) rotate(13deg);
        transform: translateX(-18%) rotate(13deg);
    }
}

.gwj-header{
    position:relative;
    &:after{
        animation: sign-sway 3s 10;
        content:'';
        display:block;
        position:absolute;
        left:$rem*13;
        top:0;
        background:url('/images/gwj/icon.png') no-repeat;
        background-size:100% 100%;
        width:$rem*113;
        height:$rem*132;
    }
}
.gwj-tab{
    &-wrapper{
        height:$rem*74;
    }
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
    font-size:$rem*20;
    background: #42210E;
    transition: transform 0.25s ease-in-out;
    &.fixed{
        transform: translate(0,100%);
    }
    &>a{
        width:16.666666%;
        float:left;
        text-align:center;
        color:#fff;
        background:#42210e;
        height:$rem*74;
        line-height:$rem*74;
        &.active{
            background:#fefb32;
            color:#42210e;
        }
    }
}
.gwj-top-banner{
    height:$rem*456;
    background:url(/images/gwj/top_banner.png) no-repeat;
    background-size: 100% 100%;
    position:relative;
}
.pk-big-btn{
    background:url(/images/gwj/pk_big_btn.png) no-repeat;
    background-size: 100% 100%;
    height:$rem*158;
    width:95%;
    margin:0 auto;
    position:absolute;
    bottom:$rem*18;
    left:$rem*16;
}

//标题栏
.gwj-title-wapper{
    height:$rem*113;
    width:100%;
    background: url(/images/gwj/title_01.png) no-repeat center bottom;
    background-size:$rem*487 $rem*113;
    margin-bottom:$rem*20;
    &.gwj-title-02{
       background-image: url(/images/gwj/title_02.png) ;
       background-size:$rem*488 $rem*97;
    }
    &.gwj-title-03{
       background-image: url(/images/gwj/title_03.png) ;
       background-size:$rem*508 $rem*102;
    }
    &.gwj-title-04{
       background-image: url(/images/gwj/title_04.png) ;
       background-size:$rem*508 $rem*102;
    }
    &.gwj-title-05{
       background-image: url(/images/gwj/title_05.png) ;
       background-size:$rem*508 $rem*101;
    }
    &.gwj-title-06{
       background-image: url(/images/gwj/title_06.png) ;
       background-size:$rem*508 $rem*102;
    }
}
//转盘
.turntable{

  &-wrapper{
    background:#fffce0;
    padding:$rem*15 $rem*30;
    .rule{

        &-title{
            background:url(/images/gwj/rule_title.png) no-repeat center;
            background-size:contain;
            height:$rem*26;
            margin:$rem*15 0;
        }
        &-content{
            font-size:$rem*14;
            color:#42210e;
            .close{
                display:none;
            }
            .retract{
                text-align:center;
                margin:$rem*15 0;
                font-weight:bold;
                &:after{
                    content:'';
                    background:url() no-repeat;
                    display:inline-block;
                    background-size:contain;
                    width:$rem*14;
                    height:$rem*7;
                    transition: transform .25s ease-in-out;
                    vertical-align: middle;
                }
                &.handstand{
                    &:after{
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }
  }
  &-header,
  &-footer{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width:100%;
  }
  &-header{
    background-image:url(/images/gwj/turntable_header.png);
    height:$rem*12;
  }
  &-footer{
    background-image:url(/images/gwj/turntable_footer.png);
    height:$rem*10;
  }
  &-body{
    background:#fff url(/images/gwj/turntable_body.png);
    background-repeat-x: no-repeat;
    background-size: 100%;

  }
  &-box{
    overflow:hidden;
    //margin-right:$rem*-8;

    position:relative;
    padding:$rem*20;
    width:100%;
    .turntable-grid{
        width:33.3333%;
         float:left;
         margin-bottom:$rem*10;
         padding-right:$rem*10;
    }
    .board,
    .starter{
      width: 100%;
      height:$rem*170;
      display:block;
      //float:left;
      border:1px solid #612922;
      &:nth-child(3n){
        //margin-right:0;
      }
    }
    .board{
      font-size:$rem*18;
      color:#fff;
      text-align:center;
      background-color: #ef3d72;
      background-size: $rem*80 $rem*80; /* 控制条纹的大小 */
      background-image: -webkit-gradient(linear, 0 100%, 100% 0,
                                  color-stop(.25, rgba(241, 81, 128,.8)), color-stop(.25, transparent),
                                  color-stop(.5, transparent), color-stop(.5, rgba(241, 81, 128,.8)),
                                  color-stop(.75, rgba(241, 81, 128,.8)), color-stop(.75, transparent),
                                  to(transparent));
      .coupon{
        background:url(/images/gwj/coupon_bg.png) no-repeat;
        text-align:center;
        width:$rem*142;
        height:$rem*60;
        color:#ef3d72;
        margin:$rem*40 auto $rem*28;
        font-size:$rem*40;
        background-size: cover;
        small,
        span{
          font-size:$rem*18;
        }
        small{
          vertical-align: super;
        }
      }
      .big-txt{
        font-size:$rem*38;
        width:$rem*76;
        margin:$rem*25 auto;
      }
      .img{
         margin:$rem*20 auto $rem*10;
         width:$rem*98;
         height:$rem*98;
         background:url(/images/gwj/iwatch.png) no-repeat;
         background-size:contain;
      }
      &.active{
        .coupon{
          background-position:-$rem*142 0;
          color:#fff;

        }
        .txt{
          color:#EF3D72;
        }
      }
    }
    .starter{
      background:#ffee30;
      &.clicked,
      &:active{
        .btn{
            background-position:-$rem*120 0 ;
        }
      }
      .btn{
        background:url(/images/gwj/start_btn.png) no-repeat;
        width:$rem*120;
        height:$rem*90;
        margin:$rem*20 auto $rem*10;
          background-size: cover;
      }
      .start_txt{
        background:url(/images/gwj/start_txt.png) no-repeat;
        width:$rem*94;
        height:$rem*23;
        margin:0 auto;
          background-size: cover;
      }
    }
    //移动块
    .active{
      //position:absolute;
      left:$rem*20;
      top:$rem*20;;
      background-color: #fff;
      background-size: $rem*80 $rem*80; /* 控制条纹的大小 */
      background-image: -webkit-gradient(linear, 0 100%, 100% 0,
                                  color-stop(.25, rgba(254, 239, 243,.8)), color-stop(.25, transparent),
                                  color-stop(.5, transparent), color-stop(.5, rgba(254, 239, 243,.8)),
                                  color-stop(.75, rgba(254, 239, 243,.8)), color-stop(.75, transparent),
                                  to(transparent));
    }
  }
}

//
.gwj-area{
    &-body{

    }
}

//砍价团
.gwj-group{
    height:$rem*446;
    position:relative;
    border-bottom:$rem solid #42210e;
    width:100%;
    overflow:hidden;
    .slide-wrapper{
        white-space: nowrap;
        height:100%;
        img{
            width:100%;
            height:100%;
        }
    }
    .slide-item{
        display:inline-block;
        width:100%;
        height:100%;
    }
    .slide-pagination{
        text-align:center;
        position:absolute;
        left:0;
        bottom:$rem*38;
        width: 100%;
        &>span{
            display:inline-block;
            width:$rem*15;
            height:$rem*15;
            border:$rem solid #ec3c71;
            background:#fff;
            border-radius:50%;
            margin-right:$rem*10;
            &.swiper-pagination-bullet-active,
            &.active{
                background:#ec3c71;
            }
        }
    }
}
//好货大搜罗
.gwj-area-body{
    overflow:hidden;
}

.wares-set-item{
    border-bottom:$rem solid #e8e8e8;
    margin-bottom:$rem*14;
}

//好货大搜罗
.wares-pro{
    &-pic{
        margin-bottom:$rem*6;
        img{
            width:100%;
            min-height:$rem*385;
        }
    }
    &-list{
        overflow:hidden;
        background:#f8f8f8;
        padding-left:$rem*10;
        padding-bottom:$rem*20;
    }
    &-item{
        float:left;
        width:25%;
        padding-right:$rem*10;
        text-align:center;
        img{
            width:100%;
            height:$rem*160;
        }
        h5{
            font-size:$rem*18;
            color:#292929;
            overflow:hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .price{
            font-size:$rem*12;
            color:#b91107;
            &>strong{
                font-size:$rem*14;
            }
            &.del-price{
                color:#979797;
            }
        }
    }
}
.goods-footer{
    padding:$rem*20 $rem*18;
    border-bottom:$rem solid #42210e;
    overflow:hidden;
    .see-more{
        background:url(/images/gwj/see_more.png) no-repeat;
        background-size:contain;
        width:$rem*118;
        height:$rem*25;
        float:right;
    }
}
.buyer-set{
    &-wrapper{
        overflow:hidden;
        padding-left:$rem*18;
    }
    &-item{
        width:33.3333%;
        float:left;
        //height:$rem*403;
        padding-right:$rem*18;
        margin-bottom:$rem*20;

    }
}

.buyer-box{
    //background-image:url(/images/gwj/buyer_bg.png);
    //font-size:$rem*18;
    //color:#42210e;
    //background-size: 100% 100%;
    //padding:$rem*2 $rem*6 $rem*7 $rem*2;
    .buyer-bg{
        width:100%;
    }
    /* .pic{
        width:100%;
        height:$rem*190;
        img{
            max-width:100%;
            max-height:100%;
        }
    }
    .info-wrapper{
        padding:0 $rem*8;
        .text{
            padding:$rem*12 0 $rem*12 $rem*60;
        }
    }
    .tag{
        &:before{
            content:'';
            background:url() no-repeat;
            display:inline-block;
            width:$rem*19;
            height:$rem*19;
            background-size:contain;
              vertical-align: middle;
        }
        padding:$rem*15 0;
        text-align:center;
        border-bottom:$rem*2 dashed #7a7a7a;
    }
    .face{
        height:$rem*44;
        width:$rem*44;
        float:left;
        border-radius:50%;
        margin-top:$rem*12;
    }
    .country{

        img{
            height:$rem*20;
            width:$rem*20;
            border-radius:50%;
              vertical-align: middle;
        }
    }
    .btn-wrapper{
        padding-left:$rem*1;
        padding-right:$rem*5;
    }
    .btn{
        height:$rem*50;
        line-height:$rem*50;
        background:#ec3c71;
        font-size:$rem*24;
        text-align:center;
        color:#fff;

    } */
}
//海外推荐
.explosive-pro{
    &-tab{
        padding:0 $rem*12;
        .tab-header{
            overflow:hidden;
            border:1px solid #040000;
            background:#fff;
            width:100%;
            //padding:0 $rem*10;
            overflow:hidden;
            margin-bottom:$rem*15;
            &>li{
                width:25%;
                color:#42210e;
                float:left;
                padding:$rem*10 0;
                text-align:center;
                border-right:1px solid #42210e;
                &:last-child{
                    border-right:0;
                }
                &.active{
                    background:#ffffb5;
                }
            }

        }

        .tab-body{
            overflow:hidden;
            &-item{
                display:none;
                &.active{
                    display:block;
                }
            }
        }
    }

    &-item{
        width:50%;
        float:left;
        padding-right:$rem*6;
        margin-bottom:$rem*12;
        &:nth-child(even){
            padding-left:$rem*6;
            padding-right:0;
        }
    }
    &-box{
        background-image:url(/images/gwj/buyer_bg.png);
        background-size: 100% 100%;
        padding:$rem*20;
        font-size:$rem*18;
        color:#333;
        position:relative;
        .statusText{
            padding:$rem*18;
            color:#fff;
            background:rgba(0,0,0,.3);
            font-size:$rem*28;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            white-space: nowrap;
        }
        .title{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom:$rem*20;
            margin-top:$rem*10;
        }
        .pirce-market{
            text-decoration: line-through;
            margin-top:$rem*-20;
        }
        img{
            height:$rem*260;
            width:$rem*260;
            max-width:100%;
        }
        .price-box{
            width:100%;
            border:1px solid #040000;
            border-radius:$rem*6;
            color:#333;
            height:$rem*45;
            overflow:hidden;
            line-height:$rem*45;
            span{
                display:block;
                float:left;
                width:30%;
                text-align:center;
            }
            .num{
                color:#fff;
                background:#ff3385;
                width:70%;
                border-top-right-radius:$rem*6;
                border-bottom-right-radius:$rem*6;
                strong{
                    font-size:$rem*34;
                }
            }
        }
    }
}

.gwj-loading-bg{
    background: url(/images/gwj/loading.gif) no-repeat center;
}
.gwj-hold-bg{
    background: url(/images/gwj/hold@100x100.png) no-repeat center;
    background-size: 80%;
}

.gwj-hold-bg-big{
    background: url(/images/gwj/hold@250x250.png) no-repeat center;
}

//买手占位图
.buyer-hold{
    height:$rem*800;
    width:100%;
}
//错误
.msg-error{
  padding:$rem*5 $rem*10;
  background:rgba(0,0,0,.6);
  color:#fff;
  position:fixed;
  z-index:999;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  border-radius:$rem*5;
  display:inline;
  font-size:$rem*24;
  -webkit-transition: opacity .6s ease-in-out;
  opacity:0;
}
/* .gwj-mask{
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    //display: none;

    background: rgba(0,0,0,.7);
    &.open
    {
        display: block;
    }
} */
/* .reward-dialog{
    background:url(/images/gwj/dialog_bg.png) no-repeat;
    position:fixed;
    z-index:100;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    padding:$rem*50 $rem*50;
    background-size:100% 100%;
    .dialog-header{
        position:relative;
        &:after{
            content:'X';
            width:$rem*80;
            height:$rem*80;
            position:absolute;
            top:-$rem*70;
            right:-$rem*70;
            background:#d6d6d4;
            color:#fff;
            border-radius:50%;
            font-size:$rem*55;
            text-align:center;
            line-height:$rem*80;
        }
    }
    .text-msg{
        .title{
            color:#42210e;
            font-size:$rem*36;
            text-align:center;
              white-space: nowrap;
            strong{
                font-size:$rem*48;
            }
        }
    }
    .btn-group{
        white-space:nowrap;
        margin-top:$rem*30;
    }
    .btn{
        border:none;
        font-size:$rem*32;
        color:#fff;
        text-align:center;
        height:$rem*78;
        background:url(/images/gwj/btn_bg.png) no-repeat;
        background-size: 100% 100%;
    }
    .sm-btn{
        width:50%;
    }
    .lg-btn{
        width:100%;
    }
}
 */


.vote-mask{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index: 99;
  background:rgba(0,0,0,.7);
  display:none;
  &.open{
    display:block;
  }
}

.vote-dialog{
  position:fixed;
  z-index:100;
  display:none;
  width:$rem*530;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  &.open{
    display:block;
  }
  &-header,
  &-footer{
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  &-header{
    position:relative;
    background-image:url(/images/exchange_header_bg.png);
    height:$rem*40;
    &.close-btn:after{
      content:'X';
      position:absolute;
      height:$rem*80;
      width:$rem*80;
      text-align:center;
      line-height:$rem*80;
      background:#d6d6d6;
      color:#fff;
      border-radius:50%;
      font-size:$rem*55;
      top:$rem*-30;
      right:$rem*-30;
    }
  }
  &-body{
    background:url(/images/exchange_body_bg.png);
    background-repeat-x: no-repeat;
    background-size: 100%;
    padding:0 $rem*28;
  }
  &-footer{
    background-image:url(/images/exchange_footer_bg.png);
    height:$rem*41;
  }
}

.vote-coupon-dialog{
    //成功标题
    .succ-title{
        font-size:$rem*65;
        color:#2e95ff;
        text-align:center;
        margin-bottom:$rem*10;
    }
  .content{
    background:#ffadc3;
    color:#fff;
    border:$rem*2 solid #000;
    border-radius:$rem*16;
    text-align:center;
    &.pic-content{
        margin-bottom:$rem*30;
        padding:$rem*20 0;
    }
    img{
      max-width: 80%;
      max-height: 80%;
    }
    &>.num{
      display:inline-block;
      font-size:$rem*73;
      margin-right:$rem*30;
    }
    &>.txt{
      font-size:$rem*40;
      width:$rem*40;
      padding:0 $rem*22;
      line-height: 1;
      border-left: $rem solid #FFF;
      vertical-align: $rem*-25;
      display:inline-block;
    }
    strong{
      font-size:$rem*120;
      vertical-align:$rem*-8;
    }
  }
  .text-msg{
    font-size:$rem*36;
    color:#42210e;
    margin-bottom:$rem*50;
    text-align:center;
    strong{
        font-size:$rem*48;
    }
  }
  .text{
    padding:$rem*10 0;
    &>div{
      font-size:$rem*20;
      strong{
        color:#ff4b7a;
      }
    }
    &>p{
      font-size:$rem*16;
      color:#666;
    }
  }
  .btn-group{
    white-space:nowrap;
    .dialog-btn{
        display:inline-block;
        width:48%;
    }
  }
  .dialog-btn{
      background:url() no-repeat;
      background-size: 100% 100%;
      font-size:$rem*32;
      text-align:center;
      color:#fff;
      padding:$rem*14 0;
  }
  .dialog-btn-blue{
    background-image:url();
  }
}

.cheap-wrapper{
    padding:0 $rem*12;
}
